<template>
  <div class="label-warp">

    <p class="title" >学习中心</p> <!-- 需要看下 v-slot -->
    <!--<router-link :to="{name:'userCenter-userCenter'}" class="title" custom >
      <p class="title" >学习中心</p>
    </router-link> -->
    <div class="warp">
      <el-avatar class="icon" :src="circleUrl" ></el-avatar>
      <!-- <p>000000</p> -->
      <!-- <p class="normal">普通用户</p> -->
    </div>

    <div>
      <div class="item" v-for="(item, index) in labels" :key="index" :class="index!==labels.length-1?'item-border':''">
        <p class="label-title">{{ item.title }}</p>
        <p
          @click="checkLabel(child)"
          class="label"
          style="display: flex;align-items: center;justify-content: space-between;" 
          :class="isActive(child)?'active':''"
          flex="main:justify cross:center"
          v-for="(child, labelIndex) in item.children"
          :key="labelIndex"
        >
          {{ child.label }}<span class="iconfont icon-jiantouyou"></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

import router from '/@/router'

export default {
  data() {
    return {
      activeIndex:0,
      circleUrl: '../../../../../src/assets/images/bg/head_icon.png',
      labels: [
        // { title: "账户信息", children: [{ label: "个人资料" ,pathName:'userData'}] },
        // { title: "账户安全", children: [{ label: "修改密码",pathName:'modifyPassword' }] },
        { title: "课程", children: [{ label: "我的课程",pathName:'userCenter-userCenter' }] },
        // { title: "课程", children: [{ label: "我的课程",pathName:'userLesson' }] },
        { title: "作业", children: [{ label: "我的作业" ,pathName:'userCenter-homework'}] },
        { title: "订单管理", children: [{ label: "我的订单",pathName:'order-userOrders' }] }, // 后续 name 都要改
        { title: "答疑板", children: [{ label: "我的答疑", pathName:'qa-userqa'}] },
        { title: "考试", children: [{ label: "我的考试",pathName:'exam-userExam' }] },
          //  { title: "消息", children: [{ label: "我的消息",pathName:'message' }] },
      ],


    };
  },
  computed:{
   
  },
  methods: {
      checkLabel:function(item){
       
        router.push({ name:item.pathName})
      }, 
   isActive:function(item){
      
        return  this.$route.name === item.pathName
      }
  }
};
</script>

<style  lang="scss" scoped>
.label-warp{
    padding:0 16px 20px;
     box-shadow: 0 0 6px rgba(219,124,65,0.1);
     width: 180px;
}

.icon{
  width: 60px;
  height: 60px;
}
.warp {
    text-align: center;
    margin:20px 0 40px
}
.title {
  background: #ff5f19;
  color: #ffffff;
  border-radius: 0 0 6px 6px;
  text-align: center;
  height: 36px;
  line-height: 36px;
  width: 80%;
  margin: 0 auto;
  cursor: pointer;
}
.item{
    padding:24px 0;
}
.item-border{
    border-bottom: 1px solid rgba(219,124,65,0.1);
}
.normal{
    font-size: 12px;
    color: #999999;
}
.label-title{
        font-size: 14px;
    color: #999999;
    margin-bottom: 10px;
}
.label{
    color: #333333;
    cursor: pointer;
}
.active{
    color: #ff5f19;
}
.el-avatar {
  background: #db7c41;
}
.icon{
  color: var(--el-color-primary);// $--color-primary;
}
</style>